<template>
	<view class="">
		<view class="back-top" :style="{ background }">
			<view class="" :style="{ height: height + 'px' }"></view>
			<view class="back-icon-con flex-row items-center">
				<view class="one-icon" @tap="back"><u-icon name="nav-back" size="44" color="#fff"></u-icon></view>
				<view class="back-top-title" :style="{ color }">签到</view>
			</view>
		</view>
		<view class="bg_img"><image :src="ImageUrl + '/1/qiandao.png'" class="bg_img " mode=""></image></view>

		<view class="q-con">
			<view class="item-con">
				<view class="q-title">签到得奖励金</view>
				<view class="flex-row" style="flex-wrap: wrap;">
					<view :class="[index != 6 ? 'q-item' : 'q-last', { active: item.isSign==0 }]" v-for="(item, index) in dataList" :key="index" @click="userSign(item,index)">
						<view class="flex-row items-center justify-center item" style="padding: 40rpx 0;" v-if="index == 6">
							<view class="flex-col justify-between" style="height: 100%;padding-right: 20rpx;">
								<view class="item-title">第{{ item.days }}天</view>
								<view class="item-title">+{{ item.money }}</view>
							</view>
							<image src="/static/img/qb.png" mode="" class="qb-icon"></image>
						</view>
						<view class="flex-col items-center justify-between item" v-else>
							<view class="item-title">第{{ item.days }}天</view>
							<image src="/static/img/qs.png" mode="" class="qs-icon"></image>
							<view class="item-title">+{{ item.money }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item-con" style="margin-top: 30rpx;">
				<view class="q-title" style="text-align: left;">签到规则</view>
				<view class="q-content">{{ content }}</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
var _ = require('lodash/array');
export default {
	data() {
		return {
			content: '',
			dataList: [],
			current: 0,
			color: '#fff',
			background: 'transparent',
			height: uni.getSystemInfoSync().statusBarHeight
		};
	},
	onLoad() {
		this.getSignList();
		this.getContent();
	},
	methods: {
		async getContent() {
			const res = await this.$request('content/text', { type: 5 });
			if (res.result == 0) {
				this.content = res.data.content;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getSignList() {
			const res = await this.$request('user/sign-list', { uid: uni.getStorageSync('uid') }, { showLoading: true });
			if (res.result == 0) {
				this.dataList = res.dataList;
				this.current = _.findLastIndex(res.dataList,(item) => {
					return item.isSign == 0;
				});
				console.log(this.current)
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async userSign(item,index) {
			var userInfo = getApp().globalData.userInfo
			if(item.isSign==0 || index!=this.current+1) return;
			if(userInfo.isSign != 1) return this.$util.msg('今日已签到!');
			const res = await this.$request('user/sing-in', { uid: uni.getStorageSync('uid') }, { showLoading: true });
			if (res.result == 0) {
				this.$util.msg('签到成功!');
				const index=res.data.day-1;
				item.isSgin=0;
				this.back();
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.back-icon-con {
	height: 44px;
	position: relative;
	padding-left: 10rpx;
}

.back-top {
	position: fixed;
	top: 0;
	z-index: 99;
	left: 0;
	width: 100%;
}

.back-top-title {
	height: 44px;
	line-height: 44px;
	// margin-right: 94px;
	width: 250rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fff;
}

.bg_img {
	width: 100%;
	height: 450rpx;
}
.q-con {
	position: absolute;
	top: 300rpx;
	padding: 20rpx;
	width: 100%;
}
.q-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	text-align: center;
	padding: 20rpx 0;
}
.item {
	padding: 20rpx;
	height: 100%;
}
.item-con {
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 0px 29rpx 0px rgba(246, 246, 246, 0.68);
	border-radius: 30rpx;
	padding: 40rpx;
}
.item-title {
	font-size: 20rpx;
	font-weight: 500;
	color: #666666;
}
.q-item {
	width: 140rpx;
	height: 176rpx;
	background: #f6f7fb;
	border-radius: 20rpx;
	margin-top: 23rpx;
	margin-right: 23rpx;
}
.q-item:nth-child(4n) {
	margin-right: 0 !important;
}
.q-last {
	width: 301rpx;
	height: 176rpx;
	background: #f6f7fb;
	border-radius: 17rpx;
	margin-top: 23rpx;
}
.active {
	background: #f7d74b;

	.item-title {
		color: #ffffff !important;
	}
}
.qs-icon {
	width: 60rpx;
	height: 45rpx;
}
.qb-icon {
	width: 133rpx;
	height: 100rpx;
}
.q-content {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
	max-height: 200rpx;
	overflow-y: scroll;
}
</style>
